.header {
  // 头部最上层样式
  .nav-topnar {
    height: 39px;
    line-height: 39px;
    background: #333333;
    .container {
      @include flex();
      a {
        display: inline-block;
        color: #b0b0b0;
      }
      .tab-menu {
        a {
          margin-right: 17px;
        }
      }
      .tab-user {
        a {
          cursor: pointer;
          margin-left: 17px;
        }
      }
      .tab-user-cart {
        text-align: center;
        @include setsize(110px, 39px);
        background-color: #ff6600;
        color: #fff;
        span {
          @include setimg("/imgs/icon-cart-checked.png");
          display: inline-block;
          @include setsize(16px, 12px);
          margin-right: 4px;
        }
      }
    }
  }
  // 头部下面样式
  .nav-header {
    .container {
      position: relative;
      height: 112px;
      @include flex();
      .nav-header-logo {
        @include setsize(55px, 55px);
        display: inline-block;
        background: #ff6600;
        border-radius: 22px;
        a {
          display: inline-block;
          @include setsize(110px, 55px);
          &::before {
            content: " ";
            display: inline-block;
            @include setimg("/imgs/mi-logo.png");
            @include setsize(55px, 55px);
            transition: all 0.3s;
          }
          &::after {
            content: " ";
            display: inline-block;
            @include setimg("/imgs/mi-home.png");
            @include setsize(55px, 55px);
          }
          &:hover:before {
            margin-left: -55px;
            transition: all 0.3s;
          }
        }
      }
      .nav-header-list {
        display: inline-block;
        .list-item {
          display: inline-block;
          font-size: 15px;
          span {
            color: #000;
            font-weight: bold;
            cursor: pointer;
            height: 112px;
            display: inline-block;
            line-height: 112px;
            &:hover {
              color: $colorA;
            }
          }
          &:hover {
            .children {
              transition: all 0.3s;
              height: 200px;
              opacity: 1;
              border: 1px solid #e5e5e5;
            }
          }
          .children {
            z-index: 10;
            background: #fff;
            transition: all 0.3s;
            box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
            border: 1px solid $colorF;
            top: 112px;
            left: 0px;
            position: absolute;
            width: $min-width2;
            height: 0px;
            opacity: 0;
            overflow: hidden;
            ul {
              @include flex();
              li {
                cursor: pointer;
                position: relative;
                width: 16.6%;
                text-align: center;
                .children_img {
                  margin-top: 25px;
                  img {
                    height: 100px;
                  }
                }
                .children_name {
                  margin-top: 5px;
                  font-size: 14px;
                  font-weight: bold;
                  color: #000;
                }
                .children_price {
                  margin-top: 5px;
                  font-size: 14px;
                  font-weight: bold;
                  color: #ff6600;
                  margin-bottom: 20px;
                }
                &::before {
                  content: " ";
                  position: absolute;
                  right: 0px;
                  width: 1px;
                  height: 110px;
                  top: 30px;
                  border-right: 1px solid #e5e5e5;
                }
                &:last-child::before {
                  display: none;
                }
              }
            }
          }
        }
      }
      .nav-header-search {
        .wapper {
          @include setsize(319px, 52px);
          @include flex();
          border: 1px solid #e0e0e0;
          input {
            color: #b0b0b0;
            font-size: 15px;
            border: none;
            border-right: 1px solid #e0e0e0;
            @include setsize(264px, 100%);
            padding-left: 10px;
          }
          .search_ok {
            width: 55px;
            text-align: center;
            a {
              @include setsize(18px, 18px);
              display: inline-block;
              @include setimg("/imgs/icon-search.png");
            }
          }
          &:hover #search_input,
          &:hover {
            border: 1px #ff6600 solid;
          }
        }
      }
    }
  }
}